<template>
    <div>
        <h3>显示房型信息</h3>
        房型名称:
        <input type="text" v-model="can.roomName">
        房型面积:
        <input type="text" v-model="can.smian">-   <input type="text" v-model="can.emian">
        <input type="button" value="查询" @click="getlist">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>Id</td>
                    <td>房型名称</td>
                    <td>面积</td>
                    <td>图片</td>
                    <td>状态</td>
                    <td>房号</td>
                    <td>操作</td>
                </tr>

                <tr v-for="item in query.list">
                    <td>{{item.id}}</td>
                    <td>{{item.roomName}}</td>
                    <td>{{item.mianJi}}</td>
                    <td>

                        <img :src="item.img" alt="" width="100" height="100">
                    </td>
                    <td>{{item.state?"投放":"未投放"}}</td>
                    <td>{{item.rnumber}}</td>           
                    <td>
                        <input type="button" value="删除" @click="del(item.id)">
                        <input type="button" v-if="item.state==0"  value="投放" @click="updstate(item.id,1)">
                        <input type="button" v-if="item.state==1"  value="未投放" @click="updstate(item.id,0)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import axios from 'axios';


onMounted(()=>{
    getlist();
})
const updstate=(id:any,state:any)=>{
    if(confirm("确认修改吗?")){
        axios({
        url:'/api/Room/UpdState',
        method:'put',
        params:{
            ids:id,
            state:state,
        },
    })
    .then(res=>{
        console.log(res);
        if(res.data>0){
            alert("修改成功");
            getlist();
        }
        else{
            alert("修改失败");
            return;
        }
    })
    .catch(err=>{
        console.log(err);
    })
    }
}
const del=(id:any)=>{
    if(confirm("确认删除吗?")){
        axios({
        url:'/api/Room/RoomDel',
        method:'delete',
        params:{
            ids:id,
        },
    })
    .then(res=>{
        console.log(res);
        if(res.data>0){
            alert("删除成功");
            getlist();
        }
        else{
            alert("删除失败");
            return;
        }
    })
    .catch(err=>{
        console.log(err);
    })
    }
}
const can=reactive({
    roomName:'',
    smian:'',
    emian:'',
})
const query:any=reactive({
    list:[],
})
const getlist=()=>{
    axios({
        url:'/api/Room/RoomShow',
        method:'get',
        params:can,
    })
    .then(res=>{
        console.log(res);
        query.list=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}
</script>

<style scoped>

</style>